<template>
    <div class="renewable-manage">
        <div class="map">
            <img src="@/assets/images/city-map.png" alt="" />
        </div>
        <div class="flex-block ">
            <div class="item-block">
                <div class="title">垃圾统计</div>
                <rubbish-chart />
            </div>
            <div class="item-block">
                <div class="title">资源分类</div>
                <div class="resouce-chart-box">
                    <div id="resouceChart" class="resouce-chart"></div>
                </div>
            </div>
        </div>
        <div class="city-map">
            <div class="pos-item">
                <div class="word">世纪XX站点</div>
            </div>
            <div class="pos-item active" style="left: 200px;">
                <div class="word">世纪XX站点</div>
            </div>
        </div>
        <div class="count-box">
            <div class="count-num clearfix">
                <div class="count-num-box fl">9600000</div>
                <div class="count-word fl">今日运载总量(吨)</div>
            </div>
            <div class="chart-box">
                <div class="title">今日运载量曲线图</div>
                <div class="yun-chart" id="yunChart"></div>
            </div>
            <div class="division-line">
                <div class="line"></div>
            </div>
            <div class="chart-box">
                <div class="title">最近回收记录</div>
                <div class="recode-chart" id="recodeChart"></div>
            </div>
        </div>
    </div>
</template>

<script>
import rubbishChart from '@/components/rubbishChart'
export default {
    components: {
        'rubbish-chart': rubbishChart
    },
    mounted() {
        const self = this
        // 资源分类
        const resouceChart = self.$echarts.init(document.getElementById('resouceChart'))
        const resouceOption = {
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c}%'
            },
            color: ['#c68288', '#76e4ac', '#398be9', '#a0adfb', '#ffaf48'],
            series: [
                {
                    type: 'pie',
                    radius: ['55%', '85%'],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 0
                    },
                    data: [
                        {
                            value: 18,
                            name: '玻璃',
                            label: {
                                color: '#fff'
                            }
                        },
                        {
                            value: 22,
                            name: '废纸',
                            label: {
                                color: '#fff'
                            },
                            color: '#fff'
                        },
                        {
                            value: 25,
                            name: '其他',
                            label: {
                                color: '#fff'
                            },
                            color: '#fff'
                        },
                        {
                            value: 10,
                            name: '布料',
                            label: {
                                color: '#fff'
                            },
                            color: '#fff'
                        },
                        {
                            value: 15,
                            name: '金属',
                            label: {
                                color: '#fff'
                            },
                            color: '#fff'
                        }
                    ],
                    label: {
                        formatter: function(params) {
                            return `{normal|${params.name}：}{value|${params.data.value}%}`
                        },
                        rich: {
                            normal: {
                                //   color: "#8A8A8A",
                                fontSize: 14,
                                align: 'left'
                            },
                            value: {
                                fontSize: 14,
                                padding: [3, 0, 0, 0]
                            }
                        }
                    }
                }
            ]
        }
        resouceChart.setOption(resouceOption, true)
        // 今日运载量曲线图
        const yunChart = self.$echarts.init(document.getElementById('yunChart'))
        const yunOption = {
            color: ['#34f3ce', '#599bfa'],
            legend: {
                show: true,
                icon: 'roundRect',
                bottom: '0',
                left: 'center',
                itemWidth: 60,
                itemHeight: 4,
                itemGap: 16,
                textStyle: {
                    fontSize: 16,
                    color: '#fff'
                }
            },
            xAxis: {
                type: 'category',
                name: '时间',
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel: {
                    color: '#fff'
                },
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                data: [8, 10, 12, 14, 16, 18, 20]
            },
            yAxis: {
                type: 'value',
                name: '吨      ',
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 14
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff',
                        fontSize: 14
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#556a98'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            series: [
                {
                    name: '金东区',
                    data: [2, 1, 3, 2, 1, 2, 5],
                    type: 'line',
                    smooth: true
                },
                {
                    name: '婺城区',
                    data: [1, 3, 2, 3, 1, 2, 3],
                    type: 'line',
                    smooth: true
                }
            ]
        }
        yunChart.setOption(yunOption, true)
        // 最近回收记录
        const recodeChart = self.$echarts.init(document.getElementById('recodeChart'))
        const recodeOption = {
            color: [
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#52bd55'
                        },
                        {
                            offset: 1,
                            color: 'rgba(82,189,85, 0)'
                        }
                    ]
                },
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#af7d4d'
                        },
                        {
                            offset: 1,
                            color: 'rgba(175,125,77, 0.8)'
                        }
                    ]
                }
            ],
            title: {
                text: '单位 : 吨',
                textStyle: {
                    fontSize: 16,
                    fontWeight: 'normal',
                    color: '#fff' //标题颜色
                },
                top: '50px',
                right: '3%'
            },
            legend: {
                show: true,
                top: '20px',
                right: '0',
                itemWidth: 20,
                itemHeight: 14,
                itemGap: 16,
                textStyle: {
                    fontSize: 16,
                    color: '#fff'
                }
            },
            grid: {
                left: '30px',
                right: '0',
                top: '60px'
            }, //图表的位置
            xAxis: {
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff',
                        width: 1 //轴线宽
                    }
                },
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                axisLine: {
                    show: true, //坐标轴线显示与否
                    lineStyle: {
                        color: '#fff',
                        width: 1 //轴线宽
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                splitLine: {
                    show: false
                }
            },
            series: [
                {
                    name: '金东区',
                    type: 'bar',
                    stack: '金东区',
                    barWidth: 12,
                    data: [10, 18, 50, 40, 54, 16, 28]
                },
                {
                    name: '婺城区',
                    stack: '婺城区',
                    barWidth: 12,
                    type: 'bar', //换为line 实现折线与柱状图
                    data: [10, 18, 50, 40, 54, 16, 28]
                }
            ]
        }
        recodeChart.setOption(recodeOption, true)
    }
}
</script>
